<template>
    <div class="counter">
        <h2>Counter: {{ a }}</h2>
        <button @click="a++">Increment</button>
        <button @click="a--">Decrement</button>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

const a = ref(0)

</script>

<style>
.counter {
    text-align: center;
}

button {
    margin: 5px;
    padding: 10px;
    background-color: #4caf50;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}
</style>